<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <!--    导入分页插件-->
    <script src="./js/jquery.twbsPagination.min.js"></script>
</head>

<body>
<div class="container-fluid">
    <div class="common_title">
        文章列表
    </div>
    <div class="container-fluid common_con">
        <div class="row opt_btns">
            <div class="col-xs-6">
                <form class="form-inline">
                    <select id="selCategory" name="" class="form-control input-sm">
                        <option value="">所有分类</option>
                    </select>
                    <select id="selStatus" name="" class="form-control input-sm">
                        <option value="">所有状态</option>
                        <option value="草稿">草稿</option>
                        <option value="已发布">已发布</option>
                    </select>
                    <button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
                </form>
            </div>
            <div class="col-xs-6">
                <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
            </div>
        </div>

        <table class="table table-striped table-bordered table-hover mp20">
            <thead>
            <tr>
                <th>标题</th>
                <th>作者</th>
                <th>分类</th>
                <th class="text-center">发表时间</th>
                <th class="text-center">状态</th>
                <th class="text-center" width="100">操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

        <div class="row text-center">
            <ul class="pagination pagination-sm">
                <li class="page-item first disabled"><a href="#" class="page-link">首页</a></li>
                <li class="page-item prev disabled"><a href="#" class="page-link">上一页</a></li>
                <li class="page-item active"><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#" class="page-link">5</a></li>
                <li class="page-item"><a href="#" class="page-link">6</a></li>
                <li class="page-item"><a href="#" class="page-link">7</a></li>
                <li class="page-item next"><a href="#" class="page-link">下一页</a></li>
                <li class="page-item last"><a href="#" class="page-link">尾页</a></li>
            </ul>
        </div>

    </div>
</div>

<script>
  // 设置左侧菜单
  $('#release_btn').click(function () {
    window.parent.setMenu(1, 1)
  })
</script>

<!--    模版引擎引入-->
<script src="./js/template-web.js"></script>
<!--定义 i 模版-->
<script type="text/html" id="cate">
    {{each data v}}
    <option value="{{v.id}}">{{v.name}}</option>
    {{/each}}
</script>
<script type="text/html" id="article">
    {{each data v}}
    <tr>
        <td>{{v.title}}</td>
        <td>{{v.author}}</td>
        <td>{{v.type}}</td>
        <td class="text-center">{{v.date}}</td>
        <td class="text-center">{{v.state}}</td>
        <td class="text-center">
            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
            <a href="javascript:deleteTr( 1005 );" class="btn btn-danger btn-xs">删除</a>
        </td>
    </tr>
    {{/each}}
</script>


<script>
  //自己的js

  /*
      http://localhost:8000/admin/search
      步骤:
      1.打开了文章列表页
      2.调用接口获取数据
      3.数据渲染(模版引擎)


      http://localhost:8000/admin/category_search
      步骤:
      1.打开文章列表页
      2.调用类别搜索接口,获取分类数据
      3.渲染数据到左上角下拉菜单中
   */

  $(function () {
    // 页码
    var myPage = 1

    // 总页数  (总条数 / 每页几条)
    var myTotalPage = 10

    // 根据分页插件的实例修改分页插件的配置属性
    var $pagination = $('.pagination')
    var defaultOpts = {
      totalPages:myTotalPage,
      visiblePages:5,
      first:'最左边',
      last:'最右边',
      prev:'上',
      next:'下下下',
      onPageClick: function (event,page) {
        console.log(event,page)
        //请求数据
        myPage = page
        getArtciles()
      }
    }

    $pagination.twbsPagination(defaultOpts)

    function getArtciles () {
      $.ajax({
        url: 'http://localhost:8000/admin/search',
        data: {
          page: myPage,
          perpage: 6,
          type: $('#selCategory').val(),
          state: $('#selStatus').val()
        },
        success: function (backData) {
          console.log(backData)
          var html = template('article', backData)
          console.log(html)
          $('tbody').html(html)
        }
      })
    }

    getArtciles()

    $.ajax({
      url: 'http://localhost:8000/admin/category_search',
      success: function (backData) {
        console.log(backData)
        var html = template('cate', backData)
        $('#selCategory').append(html)
      }
    })

    //筛选按钮

    $('#btnSearch').click(function (e) {
      e.preventDefault()
      //获取文章列表
      getArtciles()
    })

  })
</script>
</body>

</html>















